<!DOCTYPE html>
<html>

<head>
    <!--meta tags -->
    <meta charset="UTF-8">

    <meta name="description" content="Educational
				website - Landing Page Example">

    <meta name="keywords" content="
				education, primary education, secondary 
				education, landing page, demo">

    <meta name="author" content="Keshav">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css" />

    <title>Landing Page Example</title>
</head>

<body>

    <div class="main-wrapper">
        <header id="header">
            <div class="logo">
                <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' title="Web development logo" fill='none'
                    stroke='#0E1A27' stroke-width='8' width="50" height="50">
                    <circle cx="50" cy="50" r="40" />
                    <circle cx="50" cy="50" r="22" />
                    <circle cx="50" cy="50" r="4" />
                </svg> Web Development
            </div>

            <nav id="nav-bar">
                <ul>
                    <li><a class="nav-link" href="#features">Learn</a></li>
                    <li><a class="nav-link" href="#how-it-works">Embed a video</a></li>
                    <li><a class="nav-link" href="#pricing">Pricing boxes</a></li>
                </ul>
            </nav>
        </header>

        <section id="hero">
            <h1>Landing Page for Learning Web Development</h1>
            <form id="form" action="">
                <input name="email" id="email" type="email" placeholder="Enter your email address" required />
                <input id="submit" type="submit" value="Get Started" class="btn" />
            </form>
        </section>

        <div class="container">
            <section id="features">
                <h2>Learning Section</h2>
                <div class="grid">
                    <div class="icon"><svg fill='none' stroke='#0E1A27' stroke-width='8' stroke-dashoffset='0'
                            stroke-dasharray='0' stroke-linecap='round' stroke-linejoin='round'
                            xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width="50" height="50">
                            <polyline fill="none" points="25,35 5,50 25,65 " />
                            <line x1="58" y1="30" x2="42" y2="70" />
                            <polyline fill="none" points="75,35 95,50 75,65 " />
                        </svg></i></div>
                    <div class="desc">
                        <h3>Learn HTML</h3>
                        <p>
                            Use all the resources of this repository to start learning HTML from scratch.
                            Web Development Demo Pages collection.
                        </p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <svg fill='none' stroke='#0E1A27' stroke-width='8' stroke-dashoffset='0' stroke-dasharray='0'
                            stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'
                            viewBox='0 0 100 100' width="50" height="50">
                            <polygon fill="none" points="50,10 62,35 90,35 68,55 78,85 50,68 22,85 32,55 10,35 38,35" />
                        </svg>
                    </div>
                    <div class="desc">
                        <h3>Learn CSS</h3>
                        <p>
                            Use all the resources of this repository to start learning CSS from scratch.
                            Web Development Demo Pages collection.
                        </p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <svg fill='none' stroke='#0E1A27' stroke-width='8' stroke-dashoffset='0' stroke-dasharray='0'
                            stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'
                            viewBox='0 0 100 100' width="50" height="50">
                            <rect x="20" y="20" width="60" height="60" />
                            <line x1="50" y1="5" x2="50" y2="35" />
                            <line x1="50" y1="65" x2="50" y2="95" />
                            <line x1="5" y1="50" x2="35" y2="50" />
                            <line x1="65" y1="50" x2="95" y2="50" />
                        </svg>
                    </div>
                    <div class="desc">
                        <h3>Learn Javascript</h3>
                        <p>
                            Use all the resources of this repository to start learning Javascript from scratch.
                            Web Development Demo Pages collection.
                        </p>
                    </div>
                </div>
            </section>
            <section id="how-it-works">
                <h2>Embed a video</h2>
                <iframe height="315"
                    src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
                    frameborder="0" allowfullscreen></iframe>
            </section>
            <section id="pricing">
                <h2>Pricing boxes</h2>
                <div class="product">
                    <div class="level">HTML</div>
                    <h2>$0</h2>
                    <ol>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum dolor.</li>
                        <li>Lorem ipsum.</li>
                    </ol>
                    <button class="btn">Select</button>
                </div>
                <div class="product">
                    <div class="level">CSS</div>
                    <h2>$0</h2>
                    <ol>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum dolor.</li>
                        <li>Lorem ipsum.</li>
                    </ol>
                    <button class="btn">Select</button>
                </div>
                <div class="product">
                    <div class="level">Javascript</div>
                    <h2>$0</h2>
                    <ol>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum dolor.</li>
                        <li>Lorem ipsum.</li>
                    </ol>
                    <button class="btn">Select</button>
                </div>
            </section>
        </div>
        <footer>
            <ul>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <span>Copyright 2021, Web Development</span>
        </footer>
    </div>
</body>

</html>